﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Accordion</title>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<script>

</script>
<link rel="stylesheet" href="../reset.css"/>
<style>
    body {
        padding: 20px;
    }

    ul.accordion {
        width: 300px;
    }

    .accordion .accorHead {
        background: #BEE9ED;
        color: #4C5D5F;
        cursor: pointer;
        background: -webkit-linear-gradient(top, #BEE9ED, #fff);
    }

    .accordion .accorList {
        border: 1px solid #98BABE;
        border-radius: 5px;
        margin-bottom: 1px;
    }

    .accordion .act .accorHead {
        color: #A2BA49;
    }

    .accordion .accorCont {
        height: 200px;
        color: #695D51;
        padding: 5px;
    }
</style>
<body>
<ul class="accordion">
    <li class="accorList">
        <h2 class="accorHead">教政策和社</h2>

        <div class="accorCont">
            自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">人大常委会关于维</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">守饭饭全</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
</ul>
<ul class="accordion">
    <li class="accorList">
        <h2 class="accorHead">教政策和社</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">人大常委会关于维</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    
    <li class="accorList">
        <h2 class="accorHead">守饭饭全</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
</ul>

<script type="text/javascript">

    function logs() {
        var s = '';
        for (var i = 0,aLen = arguments.length; i < aLen; i++) {
            s += arguments[i] + ' ';
        }
        s = s.slice(0, -1);
        if (!window.console) alert(s);
        else
            console.log(s);
    }
    /**
     * $.Accordion
     * @extends jquery.1.6.2
     * @fileOverview 手风琴
     * @author 2kid
     * @email 444212235@qq.com
     * @site 2kid.org
     * @version 1.0
     * @date 2011-08-09
     * Copyright (c) 2011-2012 2kid
     * @example
     *   $('ul').Accordion();
     */
    (function($) {

        $.fn.Accordion = function(options) {
            var opt = $.extend({}, $.fn.Accordion.settings, options);
            return this.each(function() {
                var $this = $(this);
                var accordion = new Accordion(opt);
                accordion.init($this);
            });

        }
        var Accordion = function(options) {
            this.o = options;
            this.$accordion = null;
            this.time = this.o.time;
            this.className = this.o.className;
            this.collapsible = this.o.collapsible;
            this.last = this.showNum = this.o.showNum;
            this.event = this.o.event;
        }
        Accordion.prototype = {
            init:function(obj) {
                this.$accordion = obj;
                this.$accorHead = this.$accordion.find('.accorHead');
                this.$accorCont = this.$accordion.find('.accorCont');
                this.$accorCont.hide()
                        .eq(this.showNum).show()
                        .parent().addClass(this.className);
                this.$accorHead.bind(this.event, {_this:this}, this.change);

            },
            change:function(event) {
                var _this = event.data._this,$this = $(this);
                _this.showNum = _this.$accorHead.index($this);

                if (!_this.$accorCont.eq(_this.last).is(':animated') &&
                        !_this.$accorCont.eq(_this.showNum).is(':animated')) {
                    if (_this.collapsible) {
                        _this.$accorCont.eq(_this.last).slideUp(_this.time)
                                .parent().removeClass(_this.className);
                        if (_this.last == _this.showNum && !_this.$accorCont.eq(_this.showNum).is(':hidden')) return;
                        _this.$accorCont.eq(_this.showNum).slideDown(_this.time)
                                .parent().addClass(_this.className);

                    } else {
                        if (_this.last == _this.showNum) return;
                        _this.$accorCont.eq(_this.last).slideUp(_this.time)
                                .parent().removeClass(_this.className);
                        _this.$accorCont.eq(_this.showNum).slideDown(_this.time)
                                .parent().addClass(_this.className);
                    }
                    _this.last = _this.showNum;
                }
            }
        }
        $.fn.Accordion.settings = {
            "time":300,
            "className":"",
            "collapsible":false,
            "showNum":0,
            "event":"click"
        }
    })(jQuery);
    $('ul').Accordion({"collapsible":true,"className":"act","event":"click"});
</script>
</body>
</html>
